<template>
    <HeadImage :background="backPath">
        {{disposition[0]}}
        <p slot="two"  class="head">{{disposition[1]}}</p>
    </HeadImage>
    <div class="box_">
     <div class="content"
          :class="{'global_detail':$store.state.nowTime==='moon'}">
      <div class="detail_body">
         <div v-if="essay.encrypt===0 || myself" style="width: 100%">
             <div class="body_content"
                  v-if="essay!==''"
                  :class="{'global_font':$store.state.nowTime==='moon'}">
                 <ul class="erected_title_box">
                     <span class="essayType_title">Article classification</span>
                     <li v-for="(item,index) in essayType" :key="index" class="essayType">
                         {{item}}
                     </li>
                 </ul>
                 <span class="erected erected_title">Title of the article</span>
                 <h2 class="title">{{essays.title}}</h2>
                 <span class="erected erected_body">Article content</span>
                 <p  class="easy" :class="{'global_font':$store.state.nowTime==='moon'}" v-html="essays.body"></p>
                 <div  v-show="essayImg.length>0">
                     <span class="erected erected_img">Image of the article</span>
                     <div class="picture_display">
                         <img  v-if="essayImg.length >3"
                               class="img1"
                               v-for="(item,index) in essayImg"
                               @click="switchBrowsing(index)"
                               :src="item" alt="图片失效或丢失"
                               :style="{'margin-right': (index+1)%4===0 ? 0 : '5px'}" >

                         <img v-else-if="essayImg.length >0"
                              class="img2"
                              v-for="(item,index) in essayImg"
                              @click="switchBrowsing(index)"
                              :src="item" alt="图片失效或丢失"
                              :style="{'margin-right': (index+1)% (essayImg.length)  ===0 ? 0 : '5px'}">
                     </div>
                 </div>
                 <div class="appraise" >
                     <div class="appraise_zan" @click="like">
                         <img v-if="user_like" :src="zan[1]" alt="" title="已点赞" >
                         <img v-else :src="zan[0]" alt="" title="点赞" >
                         <p>{{essays.likes > 10000 ? (essays.likes/10000).toFixed(1)+"万" : essays.likes }}赞</p>
                     </div>

                     <div class="appraise_concern" style="margin-left: 2vw"  @click="concerns">
                         <img src="/img/common/shang.png" alt="" title=打赏>
                     </div>
                 </div>
             </div>
             <div v-else>
                 <div class="circle_box">
                     <CircleLoading></CircleLoading>
                 </div>
             </div>
             <div v-if="collection" class="admiration" >
                 <span @click="concerns" class="dis">X</span>
                 <img src="/img/common/_20230909021415.jpg" alt="">
             </div>
             <CommentReplies @handleCommentSend="handleCommentSend"></CommentReplies>
             <Comments :comments="comments" @handleCommentSend="handleCommentSend"></Comments>
         </div>

          <div v-else class="encrypt">
              <div class="encrypt_title">{{ essay.title }}</div>
              <div class="lock">
                  <img src="/img/common/suo.png" alt="" class="suo">
                  <input type="password" placeholder="加密文章，请输入密码" v-model="password">
                  <button @click="submit">确定</button>
              </div>
          </div>

      </div>
     </div>
    <UserInformation
        :content="user"
        :nowWid="essays.wid"
        :style="{'color': $store.state.nowTime==='moon' ? '#fff' : '#8f8c8c',}">
    </UserInformation>
    </div>

    <ImageViewing :masking="browsing" :maskingImg="essayImg" :index="imgIndex" @closeBrowsing="switchBrowsing"></ImageViewing>
</template>

<script>
import HeadImage from "@/components/PublicComponents/HeadImage.vue";
import Comments from "@/components/detail/Comments.vue";
import api from "@/api";
import UserInformation from "@/components/home/UserInformation.vue";
import CommentReplies from "@/components/detail/CommentReplies.vue";
import ImageViewing from "@/components/great/ImageViewing.vue";
import SiteInformation from "@/components/PublicComponents/SiteInformation.vue";
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";
import Countdown from "@/components/home/Countdown.vue";
export default {
    name: "Detail",
    components: {
        Countdown,
        CircleLoading, SiteInformation, ImageViewing, CommentReplies, UserInformation, Comments, HeadImage},
    data(){
        return{
            backPath:"",
            zan:["/img/common/zan_2.png","/img/common/zan_1.png","a"],
            concern:[" /img/common/guanzhu_2.png","  /img/common/guanzhu_1.png",],
            user_like:false,
            collection:false,
            essays:"",
            essay:"",
            ArticleDetails:{
                wid:"",
                uid:"",
                type:""
            },
            user:null,
            commented:{
                wid:"",
                index:1,
            },
            comments:[],
            supportUser:{
                wid:"",
                uid:"",
            },
            essayImg:[],
            essayType:[],
            disposition:"",
            password:"",
            browsing:false,
            imgIndex:0,
            myself:true,
        }
    },
    emits: ['handleCommentSend'],
    created() {

    },
    mounted() {
        this.essay = JSON.parse( window.localStorage.getItem("essayInfo"));
        setTimeout(()=>{
            let writing = JSON.parse(window.localStorage.getItem("DataContent"));
            if(writing.length>0){
                this.disposition = writing[15].content.split("|||||");
                this.backPath = writing[14].content;
            }
        },150)

        //浏览量增加
                  let _this = this;
                  let t = JSON.parse(window.localStorage.getItem("essayInfo")); //获取文章信息
                  let loginUser = JSON.parse(window.localStorage.getItem("user")); //获取登陆用户信息
                  if(t!=null){
                      api.saveEssayAll(t.wid).then((res)=>{
                          _this.ArticleDetails.wid = res.data.data.wid;
                          _this.ArticleDetails.uid = res.data.data.uid;
                          _this.essays = res.data.data;
                          _this.essayImg =  _this.essays.img!=="" ? _this.essays.img.split(',') : []
                          _this.essayType =  _this.essay.type!=="" ? _this.essays.type.split(',') : []
                          _this.commented.wid = res.data.data.wid;
                          window.localStorage.setItem("ArticleDetails", JSON.stringify(_this.ArticleDetails));
                          api.browseAdd(res.data.data.wid) //浏览增加
                          _this.supportUser.wid = res.data.data.wid;
                          if(loginUser != null){
                              this.myself =  res.data.data.uid === loginUser.uid
                              _this.supportUser.uid = loginUser.uid;
                              api.supportStatue( _this.supportUser).then((res)=>{
                                  this.user_like = res.data.data//检查文章是否点赞
                              })

                          }
                          api.saveEssayUserInfo(_this.essays.uid).then((res)=>{
                              console.log(res.data)
                              if(res.data.code === 200 && res.data.data) {
                                  _this.user = res.data.data;
                                  window.localStorage.setItem("userId", _this.user.uid)
                              }
                          })
                          api.articleComments(_this.commented).then((res)=>{
                              _this.comments = res.data.data;
                          })
                      })
                  }
    },
    methods:{
        switchBrowsing(index){
            this.browsing =  !this.browsing;
            this.imgIndex = index;
        },
        submit() {
            if (this.essay.password === this.password)
                this.essay.encrypt = 0;
            else {
                alert("密码错误或不为空")
                this.password = "";
            }
        },
        like(){
            if(JSON.parse(window.localStorage.getItem("user")) == null){
                alert("请先登录！")
                this.$router.replace({path:'/login'});
                return;
            }
            this.ArticleDetails.type = this.user_like ? 1 : 0;
            if(this.user_like){
                this.essays.likes-=1;
            }
             else this.essays.likes+=1;

            api.supportAdd(this.ArticleDetails).then((res)=>{
            }); //mysql赞增减操作

            api.supportChoose( this.supportUser).then((res)=>{
            });//redis赞增减操作
            this.user_like=!this.user_like;
        },
        concerns(){
            this.collection=!this.collection;
        },
        handleCommentSend(){
             setTimeout(()=>{
                 api.articleComments(this.commented).then((res)=>{
                     this.comments = res.data.data;
                 })
             },200)
        },

    },
}
</script>

<style scoped>
.circle_box{
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box_{
    box-sizing: border-box;
    width:65vw;
    margin: auto ;
    display: flex ;
    justify-content: center;
    padding-bottom: 50px;

}
.content{
    width:55vw;

    display: flex;
    justify-content: left;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
    background: #fff;

}
@keyframes content{
  0%{
    transform: scale(0);
  }
    100%{
        transform: scale(1);
    }
}
.body_content{
    padding: 5px;
    min-height: 10vh;
    color: #606266;
    border-radius: 5px;
    animation: content .3s ease-in-out 0s 1 forwards;
}
.title{
    font-size: 16px;
    letter-spacing:1.5px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 15px;
    word-break:break-all;
    border-bottom: 1px dashed #a8adad;
}
.erected{
    display: inline-block;
    padding: 1px 3px;
    font-size: 13px;
    color: #fafafa;
    margin: 5px 0;
}
.erected_title{
    background: linear-gradient(to left, #6190EB, #A7BFE8);
}
.erected_body{
     background: linear-gradient(to left, #D9A7C7, #f5ec93);
 }
.erected_img{
    background: linear-gradient(to left, #F9957E, #f5ed64);
}
.easy{
    font-size: 16px;
    overflow: hidden;
    color: #767a7e;
    padding: 2vh 1vw;
    width:  100%;
    min-height:2vh ;
    letter-spacing: 1px;
    border-bottom: 1px dashed #a8adad;
}

.appraise{
    height: 15vh;
    min-height: 100px;
    min-width:200px ;
    display: flex;
    justify-content:center;
    align-items: center;
}
.appraise img{
    width: 1.3vw;
    min-width: 25px;
    animation: img .3s ease-in-out 0s 1 forwards;
}
@keyframes img {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}
.appraise_zan,.appraise_concern{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:  40px;
    height: 40px ;
    border-radius: 50%;
    border: 1px solid #f6f3f3;
    box-shadow: 0 0 5px 0 rgb(147, 138, 138,.7);
    margin-top: 2vh;
}
.appraise_zan,.appraise_concern:hover{
    cursor: pointer;
}


.appraise_zan p,.appraise_concern p{
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    width: 8vw;
    min-width: 100px;
    text-align: center;
    font-size: 0.8vw;
}

.picture_display{
    width: 47.75vw;
    min-width: 450px;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    margin: auto;
}
.picture_display  .img1{
    flex: 1;
    margin:5px 0;
}

.picture_display .img2{
    flex: 1;
    width: calc((100% - 20px) / 4);
    aspect-ratio: 13/9;
    margin:5px 0;
}
.head{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem
}
.head img{
    margin-left: 5px; width: 25px
}
.easy img{
    max-width: 200px !important;
}
@media (min-width:0px ) and (max-width:800px)  {
    .content {
        min-width: 450px;
    }
}
@media (min-width:0px ) and (max-width:600px)  {
    .content {
        min-width: 380px;
    }
    .body_content{
        min-width: 380px !important;
        width: 380px !important;
    }
    .picture_display{
        min-width: 380px;
    }
    .box_{
        width: 380px !important;
        min-width: 380px !important;
    }
}
.admiration{
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 350px;
    z-index: 999;
}
.admiration img{
    width: 350px;
    height: 350px;
}
.dis{
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 8px;
    background: #9d9a9a;
    color: white;
    cursor: pointer;
    z-index: 9999;
}
.dis:hover{
    opacity: .8;
}
.detail_body{
    width: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.suo {
    position: absolute;
    left: 1rem;
    z-index: 999;
    width: 32px;
    margin-top: 1.5rem;
}
input {
    width: 20rem;
    height: 3rem;
    border-radius: 10px;
    border: 1px solid #828588;
    outline: none;
    text-align: center;
    padding: 0 10px;
    font-size: 1rem;
    color: #625e5e;
    margin-top: 1rem;
    box-shadow: 0 0 2px 2px #ffffff;

}

input::placeholder {
    text-indent: 1rem;
    font-size: 0.8rem;
}
button {
    position: absolute;
    right: 0;
    margin-top: 1.05rem;
    padding: 0.93rem 0.8rem;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 0;
    background: #4b73f1;
    color: white;
}
 button:hover {
    background: #68c070;
}

 .essayType{
     padding: 1px 8px;
     margin: 0 5px;
     background: #3586f1;
     color: white;
     font-size: 13px;
 }

 .erected_title_box{
     display: flex;
     align-content: center;
     list-style: none;
 }
 .essayType_title{
     color: white;
     background-image: linear-gradient(to right, #ebbba7 0%, #cfc7f8 100%);
     font-size: 14px;
     text-align: center;
 }
.encrypt  {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    position: absolute;
    z-index: 100;
    top: 0;
    right: 50%;
    height: 100%;
    transform: translateX(50%);
    font-weight: bolder;
    font-size: 18px;
    color: #3586f1;
}
.encrypt_title{
    max-width: 300px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    margin: 0 auto;
}
</style>